{% extends 'base.html' %}

{% block head %}
    <title>学生管理</title>
{% endblock head %}

{% block style %}
    table{
        margin: 0 auto;
        margin-top:20px;
        width: 800px;
    }
    th{
        border: solid #666 1px;
    }
    td{
        border: solid #666 1px;
        text-align: center;
    }
    .page-link{
        height: 30px;
        line-height: 30px;
        text-align: center;
    }
    .page-link a{
        margin:0 5px;
        border: solid #999 1px;
        text-decoration: none;
        display: inline-block;
        width: 20px;
        height: 30px;
    }
    #input-box input{
        width: 514px;
    }
    .span{
        margin-left: 6px;
    }
{% endblock style %}

{% block right %}
    <table>
        <tr>
            <th>姓名</th>
            <th>班级</th>
            <th>性别</th>
            <th>年龄</th>
            <th>手机号码</th>
            <th>QQ号码</th>
            <th>毕业学校</th>
            <th>家庭住址</th>
            <th>当前住址</th>
            <th>学习进度</th>
            <th>就业信息</th>
            <th>备注信息</th>
            <th>操作</th>
        </tr>
        {% for i in student %}
            <tr>
                <td name="name">{{ i.name }}</td>
                <td name="clsid">{{ i.clsid }}</td>
                <td name="sex">{{ i.sex }}</td>
                <td name="age">{{ i.age }}</td>
                <td name="phonenum">{{ i.phonenum }}</td>
                <td name="qq">{{ i.qq }}</td>
                <td name="school">{{ i.school }}</td>
                <td name="homeaddr">{{ i.homeaddr }}</td>
                <td name="addr">{{ i.addr }}</td>
                <td name="progress">{{ i.progress }}</td>
                <td name="job">{{ i.job }}</td>
                <td name="remark">{{ i.remark }}</td>
                <td>
                    <a class="edit" style="cursor: pointer;">编辑</a> | <a class="del" style="cursor: pointer;">删除</a>
                </td>
            </tr>
        {% endfor %}
    </table>
    <div class="page-link" style="margin-top: 10px;">
        {{ pagenum|safe }}
    </div>
{% endblock right %}

{% block dialog %}
    <div id="input-box" class="hide" style="width: 1000px;height: 800px;">
        <p><span class="span" style="margin-left: 30px;">姓名:</span><input name="name"></p>
        <p>
            <span style="vertical-align: top;">班级:</span>
            <select name="clsid" multiple="multiple" style="margin-right: 471px;"></select>
        </p>
        <p><span class="span" style="margin-left: 30px;">性别:</span><input name="sex"></p>
        <p><span class="span" style="margin-left: 30px;">年龄:</span><input name="age"></p>
        <p><span class="span">手机号码:</span><input name="phonenum"></p>
        <P><span class="span">&nbsp;&nbsp;QQ号码:</span><input name="qq"></P>
        <P><span class="span">毕业学校:</span><input name="school"></P>
        <p>
            <span class="lable" style="vertical-align: top">&nbsp;家庭住址:</span>
            <select id="provience" style="width: 150px;height: 20px;line-height: 20px;"><option>--------请选择省--------</option></select>
            <select id="city" style="width: 180px;height: 20px;line-height: 20px;"><option>-----------请选择市-----------</option></select>
            <select id="county" style="width: 180px;height: 20px;line-height: 20px;"><option>---------请选择县/区---------</option></select><br/>
            <input class="street" type="text" name="homeaddr" value="请填写街道信息" style="margin-left: 60px;width: 514px;">
        </p>
        <p>
            <span class="lable" style="vertical-align: top">当前住址*:</span>
            <select id="provience2" style="width: 150px;height: 20px;line-height: 20px;"><option>--------请选择省--------</option></select>
            <select id="city2" style="width: 180px;height: 20px;line-height: 20px;"><option>-----------请选择市-----------</option></select>
            <select id="county2" style="width: 180px;height: 20px;line-height: 20px;"><option>---------请选择县/区---------</option></select><br/>
            <input class="street" type="text" name="addr" value="请填写街道信息" style="margin-left: 60px;width: 514px;">
        </p>
        <p><span class="span">当前进度:</span><input name="progress"></p>
        <p><span class="span">就业信息:</span><input name="job"></p>
        <p><span class="span">备注信息:</span><input name="remark"></p>
        <div id="bt-box" class="hide" style="margin-top: 30px;">
            <button name='confirm' style="height: 40px;width: 80px;margin-right: 50px;">确定</button>
            <button name='cancle' style="height: 40px;width: 80px;">取消</button>
        </div>
    </div>

{% endblock dialog %}

{% block js %}
    $('#student').addClass('leftA-active')
    var clsName;
    var recordId;
    var postData = {'csrfmiddlewaretoken':'{{ csrf_token }}'};
    if ('{{ usrname }}' != 'root'){
        $('.del').click(function(){
            $(".shade").removeClass("hide");
            $(".dialog").removeClass("hide");
            $(".dlg-title").text("提示");
            $(".icon").addClass(" fa fa-warning fa-lg");
            $(".dlg-text").text("对不起，您没有操作权限！")
        })
        $('.edit').click(function(){
            $(".shade").removeClass("hide");
            $(".dialog").removeClass("hide");
            $(".dlg-title").text("提示");
            $(".icon").addClass(" fa fa-warning fa-lg");
            $(".dlg-text").text("对不起，您没有操作权限！")
        })
    }
    else{
        $('.del').click(function(){
            clsName = $(this).parent().prevAll("td[name='name']").text();
            $(".shade").removeClass("hide");
            $(".dialog").removeClass("hide");
            $("#bt-box").removeClass('hide');
            $("#input-box").addClass("hide");
            $(".dlg-title").text("提示");
            $(".icon").addClass("fa fa-exclamation-triangle fa-2x");
            $(".dlg-text").text("确定删除"+clsName+"?");
            $(".dlg-text").css("font-size", "16px");
            postData.op = 'del';
            postData.name = clsName;
        });

        $("button[name='confirm']").click(function(){
            $("#bt-box").addClass('hide');
            $("#input-box").addClass("hide");
            var clsiddata = {};
            if (postData.op != 'del'){
                postData = {'csrfmiddlewaretoken':'{{ csrf_token }}'};
                $("#input-box input").each(function(){
                    clsiddata[$(this).attr('name')] = $(this).val()
                });
                var clas = [];
                $("select[name='classes'] option:selected").each(function(){
                    clas.push($(this).text())
                });
                clsiddata.classes = clas;
                clsiddata.id = recordId;
                postData.op = 'editTeacher';
                postData.clsiddata = JSON.stringify(clsiddata);
            }
            $.post("/clsoperation/",postData,function(data){
                if (data=='OK'){
                    $(".icon").removeClass("fa fa-exclamation-triangle fa-2x");
                    $(".icon").addClass("fa  fa-check-circle-o fa-2x");
                    $(".dlg-text").text("操作成功");
                    $(".closedlg").click(function(){
                        window.location.reload();
                    });
                }
                else{
                    $(".dlg-text").text("操作失败");
                }
            })
        });
        $("button[name='cancle']").click(function(){
            $(".shade").addClass("hide");
            $(".dialog").addClass("hide");
        });

        $(".edit").click(function(){
            $(".shade").removeClass("hide");
            $(".dialog").removeClass("hide");
            $("#input-box").removeClass("hide");
            $("#bt-box").removeClass("hide");
            $(".dlg-title").text("请填写信息");
            $(".dialog").css({'height':'500px','width':'1000px','left':'35%','top':'35%'});
            $(".icon").removeClass("fa fa-exclamation-triangle fa-2x");
            $(".dlg-text").text("");
            clsName = $(this).parent().prevAll("td[name='name']").text();
            postData.op = 'getStudent';
            postData.name = clsName;
            $.post("/clsoperation/",postData,function(data){
                var obj = JSON.parse(data);
                $("select[name='name']")[0].options.length = 0;
                for (var i in obj.clas){
                    option = document.createElement('option');
                    option.innerHTML = obj.clas[i];
                    $("select[name='classes']").append(option)
                }
                recordId = obj.id
            });
            $(this).parent().prevAll().each(function(){
                $("input[name="+$(this).attr('name')+"]").val($(this).text());  {# 将表格中的内容填入input框中 #}
            })
        });
    }

{% endblock js %}